<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1" style="margin-top: 70px">
                <ul class="nav nav-pills nav-justified" >
                    <li role="presentation" class="active"><a href="#/home">主页</a></li>
                    <li role="presentation"><a href="#/user">用户管理</a></li>
                    <li role="presentation"><a href="#/student">学生管理</a></li>
                </ul>
            </div>
            <div class="row">
            <!--显示路由组件内容-->
            <div class="col-md-10 col-md-offset-1">
                <router-view></router-view>
            </div>
            </div>
        </div>
    </div>

</div>

<!--定义组件-->
<template id="home">
    <div>
      <h1>主页数据</h1>
        <div class="jumbotron" style="margin-top: 100px">
            <h1>Hello, world!</h1>
            <p>
                This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
                Learn more</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>
    </div>
</template>

<!--定义组件-->
<template id="user">
    <div>
     <h1>用户信息</h1>
        <table class="table">
            <!--tr>th*5 再按TAB键可以快速生成语句-->
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>生日</th>
                <th>操作</th>
            </tr>

            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>2012-12-12</td>
                <td>
                    <a href="" class="btn btn-success">添加</a>
                    <a href="" class="btn btn-danger">删除</a>
                </td>
            </tr>

        </table>
    </div>
</template>

<!--定义组件-->
<template id="student">
    <div>
     <h1>学生信息</h1>
        <table class="table">
            <!--tr>th*5 再按TAB键可以快速生成语句-->
            <tr>
                <th>id</th>
                <th>学生姓名</th>
                <th>学历</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>

            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>2012-12-12</td>
                <td>
                    <a href="" class="btn btn-success">添加</a>
                    <a href="" class="btn btn-danger">删除</a>
                </td>
            </tr>

        </table>
    </div>
</template>

<script src="./js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="./js/axios.min.js"></script>
<script>
   //1.主页组件的配置对象
   const  home={
       template:'#home'
   }

   //2.用户管理组件的配置对象
   const user={
       template: '#user'
   }

   const student={
       template: '#student'
   }

   //3。学生管理组件的配置对象


   //4.使用路由

   const router =new VueRouter({
       routes:[
           //配置默认路由
           {path: '/',redirect:'/home'},



           {path:'/home',component:home},
           {path:'/user',component: user},
           {path:'/student',component:student}


       ]
   })

    const app = new Vue(
        {
            el: "#app",
            data: {},
            methods: {},
            router:router

        }
    )
</script>
</body>
</html>